<template>
  <view class="page">
    <u-navbar fixed placeholder safeAreaInsetTop bgColor="#fff">
      <template #left>
        <view class="navBar">
          <text class="nav_title">旅游攻略</text>
        </view>
      </template>
      <template #center>
        <view style="width: 180px">
          <u-search
            v-model="keyword"
            placeholder="舒城景区"
            bg-color="#f2f2f2"
            :showAction="false"
            shape="round"
            clearabled
            @search="getStrategyList(String(current + 1), keyword)"
          ></u-search>
        </view>
      </template>
    </u-navbar>
    <u-sticky bgColor="#fff" :offset-top="navBarHeight">
      <u-tabs :current="current" :list="tabList" @click="changeTab" line-color="#01756B"></u-tabs>
    </u-sticky>
    <scroll-view
      refresher-enabled
      @refresherrefresh="onRefresh"
      :refresher-triggered="triggered"
      scroll-y
      class="content"
      :style="{ height: '80vh' }"
    >
      <u-empty
          v-if="!strategyList.length"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
      >
      </u-empty>
      <liu-waterfall v-else :dataList="strategyList" :column="columns" bg-color="#F3F3F3"
                     @item-click.stop="strategyDetail">
        <template #info="{ item }">
          <view style="padding: 0 9px 9px;">
            <text class="strategy-title">{{ item.title }}</text>
            <view class="strategy-info">
              <view class="avatar">
                <u-avatar :src="item.createUserInfo.avatar" size="20"></u-avatar>
                <text>{{ item.createUserInfo.nickName }}</text>
              </view>
              <view class="heart" @click="strategyLike(item)">
                <u-icon v-if="!item.checkLike" name="heart"></u-icon>
                <u-icon v-else name="heart-fill" color="#0E9489"></u-icon>
                <text>{{ item.strategyLikeNum }}</text>
              </view>
            </view>
          </view>
        </template>
      </liu-waterfall>
    </scroll-view>
    <view class="add-btn" @click="toPublish">+</view>
    <tabs :current="1"/>
  </view>
</template>
<script>
import {getStrategyList, strategyLike, strategyLikeCance} from "@/api/introduction";

export default {
  onPullDownRefresh() {
    this.triggered = true
  },
  data() {
    return {
      triggered: false,
      current: 1,
      keyword: '',
      tabList: [
        {
          name: '关注',
          scene: '1'
        },
        {
          name: '推荐',
          scene: '2'
        },
        {
          name: '最新',
          scene: '3'
        }
      ],
      strategyList: [],
      columns: 2,
    };
  },
  computed: {
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
  },
  onShow() {
    let homeFlag = uni.getStorageSync("homeFlag");
    if(homeFlag) {
      this.current = 2;
      this.getStrategyList(3)
    } else {
      this.getStrategyList()
      this.current = 1;
    }
  },
  onHide() {
    uni.setStorageSync("homeFlag", false);
  },
  methods: {
    // 获取攻略列表
    async getStrategyList(scene = '2', title = '') {
      const {code, data, msg} = await getStrategyList({
        auditStatus: '1',
        scene,
        title
      })
      if (code !== 200) {
        this.$modal.showToast(msg)
        return
      }
      this.strategyList = data.rows
    },

    async changeTab(item) {
      await this.getStrategyList(item.scene)
      this.current = item.index
    },
    // 查看详情
    strategyDetail(strategy) {
      uni.navigateTo({
        url: `/pages/Introduction/pages/detail?strategyId=${strategy.id}&createTime=${strategy.createTime}`
      })
    },
    // 发布攻略
    toPublish() {
      uni.navigateTo({
        url: '/pages/Introduction/pages/publish'
      })
    },
    // 攻略点赞
    async strategyLike(strategy) {
      let res
      if (strategy.checkLike) {
        // 取消点赞
        res = await strategyLikeCance({
          aimId: strategy.id
        })
      } else {
        // 新增点赞
        res = await strategyLike({
          aimId: strategy.id
        })
      }
      const {code, msg} = res
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      await this.getStrategyList(String(this.current + 1))
    },
    async onRefresh() {
      this.triggered = true
      await this.getStrategyList(String(this.current + 1))
      this.triggered = false
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-tabs__wrapper__nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
}

::v-deep .u-tabs__wrapper__nav__item {
  flex: 1 1 0% !important;
}

.page {
  width: 100vw;
  height: 100vh;

  .navBar {
    display: flex;
    align-items: center;

    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
    }
  }

  .content {
    background-color: #f3f3f3;

    .strategy-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      margin-top: 20rpx;
    }

    .strategy-info {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-content: center;

      .avatar {
        display: flex;
        align-items: center;

        text {
          font-size: 24rpx;
          margin-left: 5px;
        }
      }

      .heart {
        display: flex;
        align-items: center;
        color: #666666;
      }
    }
  }

  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 20px;
    bottom: 150px;
    width: 56px;
    height: 56px;
    background: radial-gradient(50% 50% at 50% 50%, #148C81 0%, #01756B 100%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 40px;
  }
}
</style>
